<script setup>
import {useStore} from "@/stores"
import {reactive, ref} from "vue";
import {EditPen, Lock, Message, Select} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {post} from "@/net";
import router from "@/router";

const store = useStore()

const passwordSecurityForm = reactive({
  password_old: '',
  password_new: '',
  password_new_repeat: ''
})
const emailSecurityForm = reactive({
  email: store.auth.user.email,
  code: ''
})
//--------------------------------密码--------------------------------------
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordSecurityForm.password) {
    callback(new Error("两次输入的密码不一致!"))
  } else {
    callback()
  }
}
//-------------------------------校验规则-------------------------------------
const rules = {
  password: [
    {required: true, message: '请输入密码', trigger: ['blur', 'change']},
    {min: 6, max: 20, message: '密码长度必须在6-20个字符之间', trigger: ['blur', 'change']}
  ],
  password_repeat: [{validator: validatePass2, trigger: ['blur', 'change']}],
  email: [
    {required: true, message: '请输入电子邮箱地址', trigger: ['blur', 'change']},
    {type: 'email', message: '电子邮箱格式不正确', trigger: ['blur', 'change']}
  ],
  code: [
    {
      required: true, message: '请输入验证码', trigger: ['blur']
    }
  ]
}
//-------------------------------修改邮箱-------------------------------------
const isEmailValid = ref(true)
const EmailMessage = ref("获取验证码")
let countDown = ref(60)
const validateEmail = () => {
  if (emailSecurityForm.email === null || emailSecurityForm.email === "") {
    return ElMessage.warning("请输入邮箱")
  }
  if (!isEmailValid)
    return
  isEmailValid.value = false
  let timer = setInterval(() => {
    if (countDown.value > 0) {
      EmailMessage.value = countDown.value + 's后重新获取验证码'
      countDown.value--
    } else {
      clearInterval(timer);
      isEmailValid.value = true; // 启用按钮
      countDown.value = 60; // 重置倒计时时间
      EmailMessage.value = "重新获取验证码"
    }
  }, 1000);
  post('/cat/auth/valid-register-email', {
    email: emailSecurityForm.email
  }, (message) => {
    ElMessage.success(message)
  })
}
const formRef = ref()
const updateEmail = () => {
  formRef.value.validate((isValid) => {
    if (isValid) {
      post('', {
        email: emailSecurityForm.email,
        code: emailSecurityForm.code
      }, (message) => {
        ElMessage.success(message)
        router.push("/")
      })
    } else {
      ElMessage.warning('请完整填写注册表单内容！')
    }
  })
}


const isUpdateEmail = ref(false)
</script>

<template>
  <div>
    <h1>
      <el-icon>
        <Message/>
      </el-icon>
      邮箱设置
    </h1>
    <el-form
        ref="formRef"
        label-position="top"
        label-width="100px"
        :model="emailSecurityForm"
        :rules="rules"
        style="max-width: 60vw">
      <el-form-item label="邮箱地址">
        <el-input v-model="emailSecurityForm.email" :disabled="!isUpdateEmail">
          <template #append>
            <el-button text @click="isUpdateEmail = !isUpdateEmail"> 修改邮箱
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-if="isUpdateEmail" v-model="emailSecurityForm.code" :maxlength="6" :minlength="6"
                  placeholder="输入验证码" type="code">
          <template #prefix>
            <el-icon>
              <EditPen/>
            </el-icon>
          </template>
          <template #append>
            <el-button :disabled="!isEmailValid" text @click="validateEmail()">{{ EmailMessage }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-button :disabled="!isUpdateEmail" :icon="Select" type="success" @click="updateEmail()">保存邮箱地址</el-button>
  </div>
  <el-divider/>
  <div>
    <h1>
      <el-icon>
        <Lock/>
      </el-icon>
      密码设置
    </h1>
    <el-form
        :model="passwordSecurityForm"
        label-position="top"
        label-width="100px"
        :rules="rules"
        style="max-width: 60vw">
      <el-form-item label="原密码">
        <el-input v-model="passwordSecurityForm.password_old" type="password"/>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="passwordSecurityForm.password_new" type="password"/>
      </el-form-item>
      <el-form-item label="重复新密码">
        <el-input v-model="passwordSecurityForm.password_new_repeat" type="password_repeat"/>
      </el-form-item>
    </el-form>
    <el-button :icon="Select" type="success">修改密码</el-button>
  </div>

</template>

<style scoped>

</style>